import React, { useEffect } from 'react';
import Header from '../../components/liu/header'
import '../../styles/liu/recordDetail.scss'
import { useNavigate, useLocation, NavLink } from 'react-router-dom'
import { Button, Form, Input, Col } from 'antd';
interface Props {

}
function RecordDetail(props: Props) {
    var navigate = useNavigate()
    var location = useLocation()
    const [form] = Form.useForm()
    //挂载期获取回显数据
    useEffect(() => {
        form.setFieldsValue(location.state)
    }, [])
    return (
        <div className='recordDetail'>
            <div className="main">
                <Header txt="签约详情"></Header>

                <h4>居民信息</h4>
                <div className="inputbox">
                    <Form
                        name="basic"
                        labelCol={{ span: 7 }}
                        wrapperCol={{ span: 14 }}
                        layout="inline"
                        form={form}
                    >

                        <Col span={6}>
                            <Form.Item
                                label="姓名"
                                name="name"

                                rules={[{ required: true }]}
                            >
                                <Input bordered={false} style={{ color: "#2984f8" }} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="身份证号"
                                name="id-num"
                                rules={[{ required: true }]}
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>


                        <Col span={6}>
                            <Form.Item
                                label="性别"
                                name="sex"
                                rules={[{ required: true }]}
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="出生年月"
                                name="born"
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="联系电话"
                                name="phone"
                                rules={[{ required: true }]}
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="现居地"
                                name="city"
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="居民标签"
                                name="tags"
                            >
                                {
                                    location.state.tags.map((item: any) => {
                                        return <span >{item}</span>
                                    })
                                }
                            </Form.Item>
                        </Col>

                        <Col span={16}></Col>


                        <Col span={24}><h4>签约信息</h4></Col>
                        <Col span={6}>
                            <Form.Item
                                label="签约编号"
                                name="id"
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="签约状态"
                                name="signPending"
                            >
                                <Input bordered={false} style={{ color: "#3DD4A7" }} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="签约机构"
                                name="organization"
                                rules={[{ required: true }]}
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="签约团队"
                                name="doctorTeam"
                                rules={[{ required: true }]}
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="签约医生"
                                name="doctor"
                                rules={[{ required: true }]}
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="服务包"
                                name="server"
                                rules={[{ required: true }]}
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="签约类型"
                                name="signType"
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="签约周期"
                                name="signTime"
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="费用"
                                name="signPrice"
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="申请时间"
                                name="date"
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="生效日期"
                                name="startdata"
                                rules={[{ required: true }]}
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="到期日期"
                                name="startdata"
                                rules={[{ required: true }]}
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="审核人"
                                name="auditor"
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="审核时间"
                                name="auditorTime"
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="支付时间"
                                name="payTime"
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={6}>
                            <Form.Item
                                label="支付方式"
                                name="payType"
                            >
                                <Input bordered={false} />
                            </Form.Item>
                        </Col>

                        <Col span={24}></Col>

                        <Col span={6}>
                            <Form.Item
                                label="签约备注"
                                name="comment"
                            >
                                <span>{location.state.comment==""?"无":location.state.comment}</span>
                            </Form.Item>
                        </Col>

                        <Col span={24}>
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <NavLink to="/index/record-edit" state={location.state}><Button type="primary">续约</Button></NavLink>
                                <Button onClick={() => { navigate(-1) }}>返回</Button>
                            </Form.Item>
                        </Col>
                    </Form>
                </div>
            </div>
        </div>
    );
}

export default RecordDetail;